<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <style>
      body {
        margin: 0;
        min-width: 100vw;
        min-height: 100vh;
      }
      .box {
        background-color: aliceblue;
      }
      ul{
        margin: 0;
      }
      .h, .v{
        position: absolute;
        width: 100%;
        height: 4px;
        background-color: red;
      }
      .h{
        top: 50vh;
      }
      .v{
        transform: rotate(90deg);
        left: 0;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <ul>
        <li>2</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </div>

    <div class="h" id="hline"></div>
    <div class="v" id="vline"></div>
  </body>
  <script>
     const hline = document.querySelector('#hline')
     const vline = document.querySelector('#vline')
     // 获得body 的宽度
     const bodyWidth = document.body.clientWidth
     // 纵向分割线的移动距离范围
     const vRange = Math.floor(bodyWidth/2 - 4)
     let flag = false
     function draw (x, y) {
       hline.style.top =  y + 'px'
       vline.style.left = (x - vRange) + 'px'
     }
     document.body.addEventListener('mousedown', (e)=>{
       flag = true
       draw (e.x, e.y)
     })
     document.body.addEventListener('mouseup', (e)=>{
       flag = false
     })
     document.body.addEventListener('mousemove', e=>{
       if(!flag) return
       draw (e.x, e.y)
     })
  
  </script>
</html>